<template>
  <div class="newsContent">
    <div
      class="header"
      v-if="isDetailed"
    >
      <div
        class="header-item"
        @click="getItem(1)"
      >
        <div
          class="header-item-text"
          :class="selectItem===1?'border':''"
        >
          <p
            class="header-item-text-p  "
            :class="selectItem===1?'color':''"
          >行业动态</p>
        </div>
      </div>
      <div
        class="header-item"
        @click="getItem(2)"
      >
        <div
          class="header-item-text "
          :class="selectItem===2?'border':''"
        >
          <p
            class="header-item-text-p "
            :class="selectItem===2?'border':''"
          >企业新闻</p>
        </div>
      </div>
      <div
        class="header-item"
        @click="getItem(3)"
      >
        <div
          class="header-item-text "
          :class="selectItem===3?'border':''"
        >
          <p
            class="header-item-text-p "
            :class="selectItem===3?'border':''"
          >员工风采</p>
        </div>
      </div>
    </div>
    <div
      class="content"
      v-if="isDetailed"
    >
      <div
        class="news-item"
        v-for="item in showData"
        :key="item.newsId"
        @click="getNewsId(item.newsId)"
      >
        <div class="news-item-img">
          <img
            :src="item.image"
          />
        </div>
        <div class="news-item-text-content">
          <p class="title">{{ item.title}}</p>
          <p class="text-p">{{ item.desc}}</p>
          <div class="news-item-text-content-bottom">
            <p class="news-item-text-content-bottom-left">{{ item.publishTime}}</p>
            <p class="news-item-text-content-bottom-right"><img
                src="../assets/image/浏览量.png"
                style="margin-right:10px;"
              >阅读:{{ item.views}}</p>
          </div>
        </div>
      </div>
      <div class="page-parent-content">
        <div class="page-content">
          <el-pagination
            background
            ref="pagination"
            layout="pager"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            hide-on-single-page="true"
            @current-change="sizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <div
      class="detailed-content"
      v-if="!isDetailed"
    >
      <div class="detailed-content-header">
        <p class="detailed-content-title">{{ detailedObj.title }}</p>
        <p class="detailed-content-time">
          <span>{{ detailedObj.publishTime }}</span>
          <span class="marginLeft"><img
              src="../assets/image/浏览量.png"
              style="margin-right:10px;"
            >阅读:{{ detailedObj.views }}</span>
        </p>
      </div>
      <div class="detailed-content-main">
        <p
          class="detailed-content-main-p"
          v-html="detailedObj.content"
        ></p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: { newsObj: Object },
  data() {
    return {
      selectItem: 1,
      isDetailed: true,
      page: 1,
      pageSize: 4,
      total: 0,
      showData: [],
      currentPage: 1,
      detailedObj: {}
    }
  },
  methods: {
    getItem(num) {
      this.selectItem = num;
      this.$refs.pagination.internalCurrentPage = 1;
      this.currentPage = 1;
      this.getData(this.selectItem, this.currentPage);

    },
    getData(selectItem, page) {
      this.axios({
        method: "post",
        url: "/web/api/newsList",
        params: {
          category: selectItem,
          page: page,
        },
        headers: {
          Authorization: "application",
        }
      }).then(res => {
        console.log(res);
        this.total = res.data.data.total;
        this.showData = res.data.data.data;
      });
    },
    sizeChange(num) {
      this.getData(this.selectItem, num)
    },
    getNewsId(id) {
      this.axios({
        method: "post",
        url: "/web/api/newsDetail",
        params: {
          newsId: id
        },
        headers: {
          Authorization: "application",
        }
      }).then(res => {
        console.log(res);
        this.isDetailed = false;
        this.detailedObj = res.data.data.news;
      });
    },
    goBack() {
      if (!this.isDetailed) {
        this.isDetailed = true;
      }
    }
  },
  mounted() {
    this.getData(this.selectItem, this.page);
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false);
    }
  },
  watch: {
    newsObj(n) {
      if (n.id !== undefined) {
        this.getNewsId(n.id);
      } else {
        this.getData(this.selectItem, this.page);
      }
    }
  }
}
</script>

<style scoped lang="scss">
.newsContent {
  width: 100%;
}
.header {
  width: calc(100% - 400px);
  height: 60px;
  margin: 30px auto 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.header-item {
  width: 33%;
  height: 60px;
  float: left;
  cursor: pointer;
}
.header-item-text {
  width: 100px;
  height: 58px;
  margin: 0 auto;
}
.border {
  border-bottom: 2px solid #ff4d4d;
}
.header-item-text-p {
  width: 100px;
  height: 58px;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(163, 110, 110, 0.6);
  line-height: 58px;
  text-align: center;
}
.color {
  color: #fb4646;
}
.content {
  width: 1200px;
  height: 1000px;
  margin: 0 auto;
}
.news-item {
  cursor: pointer;
  width: 100%;
  height: 200px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.news-item-img {
  width: 250px;
  height: 160px;
  margin-top: 20px;
  float: left;
  img{
    width:100%;
    height:100%;
    border-radius: 6px;
  }
}
.news-item-text-content {
  width: calc(100% - 270px);
  height: 160px;
  margin-top: 20px;

  float: right;
}
.title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
  line-height: 25px;
}
.text-p {
  height: 80px;
  margin-top: 20px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 22px;
}
.news-item-text-content-bottom {
  width: 100%;
  height: 25px;

  margin-top: 10px;
}
.news-item-text-content-bottom-left {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  line-height: 22px;
  float: left;
}
.news-item-text-content-bottom-right {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  line-height: 22px;
  float: right;
}
.detailed-content {
  width: 1200px;
  margin: 0 auto;
  margin-top: 100px;
}
.detailed-content-header {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.detailed-content-title {
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
  line-height: 28px;
}
.detailed-content-time {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  line-height: 25px;
  margin-top: 20px;
}
.marginLeft {
  margin-left: 20px;
}
.detailed-content-main {
  width: 100%;
  margin-top: 50px;
  margin-bottom: 100px;
}
.detailed-content-main-p {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 27px;
}
.page-parent-content {
  width: 100%;
  height: 36px;
  display: inline-block;
  text-align: center;
  margin-top: 30px;
}
.page-content {
  width: 370px;
  height: 36px;
  margin: 20px auto;
}
@media screen and (max-width: 800px) {
  .newsContent{
    .header{
      width:100%;
      box-sizing: border-box;
      padding: 0 15px;
      margin-top:15px;
      height:40px;
      .header-item{
        height:40px;
        .header-item-text{
          height:38px;
          p{
            font-size:0.8rem;
            height:38px;
            line-height: 38px;
          }
        }
      }
    }
    .content{
      width:100%;
      box-sizing: border-box;
      padding: 0 15px;
      height:auto;
      overflow: hidden;
      .news-item{
        display: flex;
        flex-direction: row;
        height:auto;
        overflow: hidden;
        padding:15px 0;
        .news-item-img{
          margin-top:0;
          width:100px;
          height:80px;
          float:none;
          img{
            object-fit: cover;
          }
        }
        .news-item-text-content{
          float:none;
          flex:1;
          width:auto;
          margin-top:0;
          margin-left:15px;
          height:auto;
          overflow: hidden;
          .title{
            font-size:0.8rem;
            line-height: 1.5;
          }
          .text-p{
            display: none;
          }
          .news-item-text-content-bottom{
            line-height: 1rem;
            p{
              font-size:0.6rem;
            }
          }
        }
      }
      .page-parent-content{
        margin-top:15px;
        height:auto;
        overflow: hidden;
        margin-bottom:30px;
      }
    }
    .detailed-content{
      width:100%;
      margin-top:15px;
      box-sizing: border-box;
      padding: 0 15px;
      .detailed-content-header{
        height:auto;
        padding-bottom:15px;
        .detailed-content-title{
          line-height: 1.5;
          font-size:1rem;
        }
      }
      .detailed-content-time{
        margin-top:0.2rem;
        line-height: 1.5;
      }
    }
    .detailed-content-main{
      margin:15px auto 30px;
    }
  }
}
</style>

